<!-- 回款列表-新建回款信息组件  -->
<template>
  <a-modal
    width="70%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title> 编辑发票记录 </template>
    <div>
      <a-form :model="form" :rules="rules" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedCode" label="回款类型：">
              <a-select v-model="form.collectionTypeId">
                <a-option
                  v-for="(item, index) in settingData"
                  :key="index"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="returnedType" label="发票编号：">
              <a-input size="large" v-model="form.invoiceNumber" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedWays" label="发票类型：">
              <a-select v-model="form.invoiceTypeId">
                <a-option
                  v-for="(item, index) in invoiceForm"
                  :key="index"
                  :value="item.id"
                  >{{ item.typeName }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="returnedTime" label="发票税率：">
              <a-input-number size="large" disabled v-model="form.taxRate">
                <template #suffix> % </template></a-input-number
              >
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="开票时间：">
              <a-date-picker
                v-model="form.invoicingTime"
                style="width: 200px"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="开票金额：">
              <a-input-number :min="1" v-model="form.invoicingPrice">
                <template #prepend>￥</template>
                <template #append>
                  <a-select
                    v-model="form.invoicingPriceUnit"
                    :style="{
                      width: '100px',
                    }"
                  >
                    <a-option>人民币</a-option>
                    <a-option>美金</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="开票科目：">
              <a-input size="large" v-model="form.invoicingSubject" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="开票人：">
              <a-select v-model="form.invoicingUserId">
                <a-option
                  v-for="(item, index) in PersonnelInfoData"
                  :key="index"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <div
          style="
            margin-left: 38px;
            background: aliceblue;
            height: 30px;
            display: flex;
            line-height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
          "
          ><span>客户发票信息</span></div
        >
        <a-row style="margin-top: 20px" :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="单位抬头:">
              <a-input disabled size="large" v-model="formList.companyTitle" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="纳税人识别号：">
              <a-input disabled size="large" v-model="formList.ein" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="开户行：">
              <a-input disabled size="large" v-model="formList.accountBank" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="单位地址：">
              <a-input
                disabled
                size="large"
                v-model="formList.companyAddress"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, onMounted, ref, watchEffect } from 'vue';
  import { cloneDeep } from 'lodash';
  import { GetClientDetailTabs } from '@/api/order-management/client-management/client-list/index';
  import {
    GetReturnedTypeInfo,
    getInvoiceInfo,
    GetSetInvoiceInfo,
  } from '@/api/order-management/returned-management/base-setting';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';

  // 获取回款类型设置基本信息
  const settingData = ref();
  const getClientSettingInfo = async () => {
    const res = await GetReturnedTypeInfo();
    settingData.value = res;
  };

  getClientSettingInfo();

  const props = withDefaults(
    //参数说明
    defineProps<{
      clientId: number;
      invoiceId: number;
      visible: boolean;
      formInfo: any;
    }>(),
    {
      visible: false,
    }
  );

  const clientId = ref();

  // // eslint-disable-next-line no-redeclare
  // interface GetInvoiceInfo {
  //   orderId: number | undefined; //订单id
  //   collectionTypeId: number | undefined; //回款类型id
  //   invoiceNumber: string; //发票编号
  //   InvoiceTypeId: number | undefined; //发票类型Id
  //   invoicingTime: any; //开票时间
  //   invoicingPrice: number | undefined; //开票金额
  //   invoicingPriceUnit: string; //开票金额单位
  //   invoicingSubject: string; //开票科目
  //   invoicingUserId: number | undefined; //开票人
  //   invoiceMessageId: number | undefined; //开票账户信息id
  //   invoiceProofFileId: number | undefined; //发票凭证文件id
  //   TaxRate: string;
  // }

  let form: any = ref({ taxRate: 0 });

  const formList = reactive({
    companyTitle: '', //公司抬头
    ein: undefined, //税号
    accountBank: '', //开户省市
    companyAddress: '', //公司地址
  });

  const formContent = Object.keys(formList);

  const emit = defineEmits(['update:visible', 'editinvoiceInfo']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const invoiceForm = ref([]);
  const getAccountInvoice = async () => {
    const res = await GetSetInvoiceInfo();
    invoiceForm.value = res;
  };
  getAccountInvoice();

  // 获取客户发票信息
  const getCustomerInfo = async (id) => {
    const res = await GetClientDetailTabs({
      id,
      typeId: 1,
    });
    for (let i in res) {
      if (formContent.includes(i)) {
        formList[i] = res[i];
      }
    }
  };
  // // 获取发票税率
  // const getTaxRate = (key: number) => {
  //   const msg: any = invoiceForm.value.filter((i) => i.id === key);
  //   console.log(msg);

  //   // form.value.taxRate = msg[0].taxRate;
  // };

  // 获取发票详情
  const getInvoiceData = async (id: number) => {
    const res = await getInvoiceInfo({ id });
  };

  watchEffect(() => {
    if (form.value.invoiceTypeId) {
      const msg: any = invoiceForm.value.filter(
        (i) => i.id === form.value.invoiceTypeId
      );
      console.log(msg[0]);

      form.value.taxRate = msg[0]?.taxRate;
      //   console.log(msg);
    }
  });

  onMounted(() => {
    if (modalVisible.value) {
      form.value = cloneDeep(props.formInfo);
      clientId.value = cloneDeep(props.clientId);
      const invoiceId = Number(props.invoiceId);
      getInvoiceData(invoiceId);
      getCustomerInfo(clientId.value);
    }
  });
  const rules = reactive({});

  // 保存按钮
  const handleOk = () => {
    form.value.invoicingTime = new Date(form.value.invoicingTime).toJSON();
    emit('editinvoiceInfo', form.value);
    modalVisible.value = false;
  };

  // 取消按钮
  const handleCancel = () => {
    modalVisible.value = false;
  };

  // 获取销售负责人信息
  const PersonnelInfoData = ref();
  const GetPersonnelInfo = async () => {
    const res = await GetPersonnelinformation({ page: 1, size: 99999 });
    PersonnelInfoData.value = res.content.data;
  };
  GetPersonnelInfo();
</script>

<style scoped lang="less"></style>
